<!DOCTYPE html>
<html>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>随机抽奖</title>
	<head>
	<script id="jquery_172" type="text/javascript" class="library" src="js/jquery-1.7.2.min.js"></script>
	<script id="jquery_172" type="text/javascript" class="library" src="js/jquery.jplayer.min.js"></script>
	<script type="text/javascript">
		
	$(function(){
		
		var alldata;
		var num;
		var show = $("#show");
		var btn = $("#btn");
		var open = false;
	
		$("#jquery_jplayer_start").jPlayer({
			ready: function () {
				$(this).jPlayer("setMedia", {
					mp3:"music/musicOfRolling.mp3"
				});
			},
			swfPath: "js",
			supplied: "mp3",
			wmode: "window",
			smoothPlayBar: true,
			keyEnabled: true
		});
		
		$("#jquery_jplayer_end").jPlayer({
			ready: function () {
				$(this).jPlayer("setMedia", {
					mp3:"music/musicOfDraw.mp3"
				});
			},
			swfPath: "js",
			supplied: "mp3",
			wmode: "window",
			smoothPlayBar: true,
			keyEnabled: true
		});
	
		function change(){
			var randomVal = Math.round(Math.random() * num);
			var prizeName = alldata[randomVal];
			show.text(prizeName);
		}
		
		function run(){
			if(!open){
				num = 0;
				alldata = new Array();
				$("input[class='subBox']").each(function(){
				if ($(this).attr("checked")) {
					alldata.push($(this).attr('name'));
					num ++;
				}
				});
				if(num == 0){
					alert("please select!");
					return;
				}
				// 在取出用户前 先进行乱序排列，打乱顺序
				alldata.sort(function () { 
					return 0.5 - Math.random();
				});
				$("#jquery_jplayer_start").jPlayer("play").jPlayer("repeat");
				timer=setInterval(change,10);
				btn.removeClass('start').addClass('stop').text('停止');
				open = true;
			}else{
				$("#jquery_jplayer_start").jPlayer("stop");
				clearInterval(timer);
				btn.removeClass('stop').addClass('start').text('开始抽奖');
				$("#jquery_jplayer_end").jPlayer("play").delay(1000);
				open = false;
			}
		}

	   $("#checkAll").click(function() {
			$('input[class="subBox"]').attr("checked",this.checked);
		});

		$(".class").click(function(){
			$("#checkAll").attr("checked",$subBox.length == $("input[class='subBox']:checked").length ? true : false);
		});

		btn.click(function(){run();})
		

	})
		
	</script>
	<style>
	body{ background:#fff;}
	.wrap{ width:300px; margin:100px auto; font-family:"微软雅黑";}
	.show{ width:300px; height:300px; background-color:#ff3300; line-height:300px; text-align:center; color:#fff; font-size:36px; -moz-border-radius:150px; -webkit-border-radius:150px; border-radius:150px; background-image: -webkit-gradient(linear,0% 0%, 0% 100%, from(#FF9600), to(#F84000), color-stop(0.5,#fb6c00)); -moz-box-shadow:2px 2px 10px #BBBBBB; -webkit-box-shadow:2px 2px 10px #BBBBBB; box-shadow:2px 2px 10px #BBBBBB;}
	.btn a{ display:block; width:120px; height:50px; margin:30px auto; text-align:center; line-height:50px; text-decoration:none; color:#fff; -moz-border-radius:25px; -webkit-border-radius:25px; border-radius:25px;}
	.btn a.start{ background:#80b600;}
	.btn a.start:hover{ background:#75a700;}
	.btn a.stop{ background:#00a2ff;}
	.btn a.stop:hover{ background:#008bdb;}
	</style>
	
	</head>

	<body>
	<div class="user" style="float:left"> <div>
        <input id="checkAll" type="checkbox" />全选</br>
        <input class="subBox" type="checkbox" name="Mac"/>Mac</br>
        <input class="subBox" type="checkbox" name="Rink"/>Rink</br>
        <input class="subBox" type="checkbox" name="Yoland"/>Yoland</br>
		<input class="subBox" type="checkbox" name="Kaijian"/>Kaijian</br>
        <input class="subBox" type="checkbox" name="Truman"/>Truman</br>
		<input class="subBox" type="checkbox" name="Eric"/>Eric</br>
		<input class="subBox" type="checkbox" name="Johnny"/>Johnny</br>
		<input class="subBox" type="checkbox" name="Dean"/>Dean</br>
		<input class="subBox" type="checkbox" name="Win"/>Win</br>
    </div>
</div>
	<div class="wrap">
		<div class="show" id="show">点击按钮开始抽奖</div>
		<div class="btn">
			<a href="javascript:void(0)" class="start" id="btn">开始抽奖</a>
		</div>
	</div>
	<div id="jquery_jplayer_start" class="jp-jplayer"></div>	
	<div id="jquery_jplayer_end" class="jp-jplayer"></div>	
	<div style="text-align:center;clear:both">	
</div>
	</body>
</html>